@charset "utf-8";

.shopindex-bg{
    height: 296px;
    width: 100%;
    background: url(../../img/other/shopindex-bg.png) center no-repeat;
    background-size: 100%;
    position: relative;
    .shopindex-bg-text{
        position: absolute;
        height: 100px;
        width: 100%;
        bottom: 0;
        background: rgba(0,0,0,0.8);
        .shopindex-bg-pic{
            margin-left: 15%;
            margin-top: -17px;
            width: 100px;
            height: 100px;
            img{
                width: 100%;
            }
        }
        p{
            color: #FFFFFF;
            float: left;
        }
        p:first-of-type{
            font-size: 18px;
            line-height: 18px;
            margin-top: 24px;
            margin-left: 27px;
        }
        p~p{
            font-size: 14px;
            line-height: 14px;
            margin-top: 60px;
            margin-left: -100px;
        }
        input[type="button"]{
            width: 58px;
            height: 26px;
            background: #e60012;
            border-radius: 4px;
            float: left;
            margin-top: 20px;
            font-size: 14px;
            color: #FFFFFF;
        }
        input[type="button"]:first-of-type{
            margin-right: 13px;
            margin-left: 32%;
        }
    }
}

.shopindex-content{
    width: 960px;
    margin: 10px auto 0;
    .shopindex-content-top{
        box-sizing: border-box;
        width: 960px;
        height: 54px;
        border: 1px solid #efefef;
        .shopindex-content-classify{
            height: 52px;
            float: left;
            border-right: 1px solid #efefef;
            
        }
        .shopindex-content-radio{
            float: left;
        }
        p{
            font-size: 14px;
            line-height: 52px;
            float: right;
            margin-right: 22px;
            color: #99999a;
            span:first-of-type{
                color: #444f58;
            }
            span:nth-of-type(2){
                margin-left: 15px;
                color: #e60012;
            }
        }
    } 
    .shopindex-content-itembox{
        width: 960px;
        height: 1020px;
        li{
            float: left;
            width: 240px;
            height: 340px;
            .shopindex-content-item{
                width: 240px;
                height: 340px;
                transition: 0.3s;
                cursor: pointer;
                .shopindex-content-item-pic{
                    width: 240px;
                    height: 240px;
                    overflow: hidden;
                }
                p{
                    font-size: 14px;
                    line-height: 14px;
                }
                p:first-of-type{
                    color: #505b63;
                    margin-top: 18px;
                    margin-bottom: 10px;
                }
                p~p{
                    color: #99999a;
                }
            }
            .shopindex-content-item:hover{
                box-shadow:0 15px 30px rgba(0,0,0,0.1);
                transform: translateY(-3px);
            }
        }
    }
}

.shopindex-link{
    margin-bottom: 80px;
}
